<template>
  <div>
    <el-card>
      <div slot="header">
        <span>线上热门搜索</span>
        <el-dropdown style="float: right">
          <span class="el-dropdown-link">
            <i class="el-icon-more" style="font-size: 25px"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item>双皮奶</el-dropdown-item>
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div>
        <!-- 折线图 -->
        <el-row :gutter="10">
          <el-col :span="12">
            <lineCharts></lineCharts>
          </el-col>
          <el-col :span="12">
            <lineCharts></lineCharts>
          </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table
          border
          style="width: 100%; margin: 10px 0"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column prop="date" label="排名" width="80">
          </el-table-column>
          <el-table-column prop="name" label="搜索关键字" width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="用户数"
            sortable
          >
          </el-table-column>
          <el-table-column sortable prop="prop" label="周涨幅">
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          style="float: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import lineCharts from "./lineCharts";
export default {
  data() {
    return {
      pageNum:1,
      pageSize:5
    }
  },
  name: "Search",
  components: {
    lineCharts,
  },
  methods:{
    handleSizeChange(){
      alert('暂无接口')
    },
    handleCurrentChange(){
      alert('暂无接口')
    }
  }
};
</script>

<style>
</style>